<template>
  <el-dialog
    :title="title"
    v-model:visible="dialogVisible"
    :width="width"
  >
    <el-input
      v-model="inputValue"
      :placeholder="placeholder"
      :maxlength="maxlength"
      v-if="inputVisible"
      show-word-limit
    />
    <slot></slot>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { defineProps, ref, defineEmits } from 'vue'

const props = defineProps({
  title: String,
  width: { type: String, default: '30%' },
  placeholder: String,
  maxlength: [String, Number],
  inputVisible: { type: Boolean, default: true }
})

const dialogVisible = ref(false)
const inputValue = ref('')

const emit = defineEmits(['confirm'])

const handleCancel = () => {
  dialogVisible.value = false
  inputValue.value = ''
}

const handleConfirm = () => {
  const value = inputValue.value
  dialogVisible.value = false
  inputValue.value = ''
  // 发送事件给父组件
  emit('confirm', value)
}
</script>
